<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>详情列表</title>
    <link rel="stylesheet" href="../css/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/header.css">
    <script src="../js/jquery-1.12.3.min.js"></script>
    <link rel="stylesheet" href="../css/SecondHandList.css">
    <script src="../js/SecondHandList.js"></script>
    <script src="../js/public copy.js"></script>
    <style>
        .zufang {
            float: left;
            height: 0.4rem;
            line-height: 0.4rem;
            margin-left: 0.3rem;
            font-size: 0.15rem;
        }
        
        .shouye {
            font-size: 0.2rem;
        }
    </style>

</head>

<body>
    <!--*******************引入头部************************-->
    <header id="header">
        <div class="icon">
            <div id="logo"><img src="../img/index/logo.png" /></div>
            <div id="my">
                <a href="../html/我的.html"><img class="" src="../img/index/my.png" /></a>
            </div>
            <div id="xiazai"><img class="" src="../img/index/xiazai.png" /></div>
        </div>
    </header>
    <!-- 首页租房 -->
    <div class="zufang">
        <span class="shouye">首页</span>
        <span>></span>
        <span>北京租房</span>
    </div>
    <!--********搜索框***********-->
    <div id="main">
        <div id="input" class="input-group">
            <input type="text" class="form-control" placeholder="请输入小区或商圈名！">
        </div>
    </div>

    <!--*************选项列表***************-->
    <div id="zhe"></div>
    <div id="navList">
        <ul>
            <li>区域 <span class="caret"></span></li>
            <li>月租 <span class="caret"></span></li>
            <li>房型 <span class="caret"></span></li>
            <li>更多 <span class="caret"></span></li>
        </ul>

        <!--*******区域部分*******-->
        <div id="showList">
            <div style="display: none" id="district">
                <ul>
                    <li>
                        <div id="dis_left" style="background-color: #f0f0f0;height: 100%">
                            <ul>
                                <li style="color: #ff8a00;background-color: white;">区域</li>
                                <li>地铁</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div id="dis_ccenter">
                            <ul>
                                <li>附近</li>
                                <li>不限</li>
                                <li style="color: #ff8a00;">朝阳</li>
                                <li>海淀</li>
                                <li>昌平</li>
                                <li>丰台</li>
                                <li>石景山</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div id="dis_right">
                            <ul>
                                <li style="color: #ff8a00;">不限</li>
                                <li>安贞</li>
                                <li>奥林匹克公园</li>
                                <li>百子湾</li>
                                <li>北工大</li>
                                <li>北苑</li>
                                <li>CBD</li>
                            </ul>
                        </div>
                    </li>
                    <!--<li></li>-->
                </ul>
            </div>
            <!--*******价格部分*****-->
            <div style="display: none" id="price">
                <ul>
                    <li>不限</li>
                    <li>100万以下</li>
                    <li>100万-150万</li>
                    <li>150万-200万</li>
                    <li>200万-250万</li>
                    <li>250万-300万</li>
                    <li>自定义价格 <span>最大</span> - <span>最大</span> <span>确定</span></li>
                </ul>
            </div>
            <!--*******房型部分*****-->
            <div style="display: none" id="houType">
                <ul>
                    <li>不限 </li>
                    <li>1室
                        <p><input type="checkbox"></p>
                    </li>
                    <li>2室
                        <p><input type="checkbox"></p>
                    </li>
                    <li>3室
                        <p><input type="checkbox"></p>
                    </li>
                    <li>4室
                        <p><input type="checkbox"></p>
                    </li>
                    <li>5室
                        <p><input type="checkbox"></p>
                    </li>
                </ul>
            </div>
            <!--*******更多部分*****-->
            <div style="display:none " id="more">
                <ul>
                    <li>
                        <h4>区域</h4>
                        <ul>
                            <li>南</li>
                            <li>南北</li>
                            <li>东西</li>
                            <li>东</li>
                            <li>北</li>
                        </ul>
                    </li>
                    <li>
                        <h4>面积（平方米）</h4>
                        <ul>
                            <li>50以下</li>
                            <li>50-70</li>
                            <li>70-90</li>
                            <li>90-110</li>
                            <li>110-130</li>
                            <li>130-150</li>
                            <li>150-200</li>
                            <li>200以上</li>
                        </ul>
                    </li>
                    <li>
                        <h4>标签</h4>
                        <ul>
                            <li>学区房</li>
                            <li>地铁房</li>
                            <li>不限购</li>
                            <li>满两年</li>
                            <li>满五唯一</li>
                            <li>新上架</li>
                            <li>降价/li>
                                <li>独家</li>
                                <li>有钥匙</li>
                        </ul>
                        </li>
                        <li>
                            <h4>楼龄</h4>
                            <ul>
                                <li>5年以内</li>
                                <li>10年以内</li>
                                <li>20年以内</li>
                                <li>20年以上</li>
                            </ul>
                        </li>
                        <li>
                            <h4>楼层</h4>
                            <ul>
                                <li>低楼层</li>
                                <li>中楼层</li>
                                <li>高楼层</li>
                            </ul>
                        </li>
                        <li>
                            <h3>清空条件</h3>
                            <h3>确定</h3>
                        </li>
                </ul>
            </div>

        </div>
    </div>
    <!--***************房源列表部分************-->
    <div id="houseList" class="media">
        <ul>
            <li>
                <div class="media-left">
                    <img src="../image/my/img1.png" />
                </div>
                <div class="media-body">
                    <div>
                        <h2>南沙滩小区 超低价急售</h2>
                    </div>
                    <div>
                        <h5></h5>
                    </div>
                    <div class="des1">
                        <p>2室1厅 96m² 南北<br> 青岛新天地
                        </p>
                        <p class="des1_right">3700/月</p>
                    </div>
                    <div class="des2">
                        <p>集中供暖</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="media-left">
                    <img src="../image/my/img2.png" />
                </div>
                <div class="media-body">
                    <div>
                        <h2>青年汇二期 免税三局</h2>
                    </div>
                    <div class="des1">
                        <p>3室2厅 129m² 南北<br> 青年汇家园
                        </p>
                        <p class="des1_right">4610/月</p>
                    </div>
                    <div class="des2">
                        <p>集中供暖</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="media-left">
                    <img src="../image/my/img3.png" />
                </div>
                <div class="media-body">
                    <div>
                        <h2>博雅德源稀缺两居 钥匙房源</h2>
                    </div>
                    <div class="des1">
                        <p>2室2厅 126m² 南北<br>西二1旗</p>
                        <p class="des1_right">3420/月</p>
                    </div>
                    <div class="des2">
                        <p>集中供暖</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="media-left">
                    <img src="../image/my/img4.png" />
                </div>
                <div class="media-body">
                    <div>
                        <h2>朝阳北路蹭车库自住首选</h2>
                    </div>
                    <div class="des1">
                        <p>5室3厅 260m² 南北<br>武夷花园二手房</p>
                        <p class="des1_right">5408/月</p>
                    </div>
                    <div class="des2">
                        <p>集中供暖</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="media-left">
                    <img src="../image/rentalList/img5.png" />
                </div>
                <div class="media-body">
                    <div>
                        <h2>金汉旭城 东南金角一居</h2>
                    </div>
                    <div class="des1">
                        <p>1室1厅 60m² 东南<br>鲁谷花园二手房</p>
                        <p class="des1_right">3300/月</p>
                    </div>
                    <div class="des2">
                        <p>集中供暖</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <!--********************引入尾部**************************-->
    <footer>
        <div id="foot_content">
            <h3>北京找房无忧 > 首页</h3>
            <div id="phone">
                <ul>
                    <li>
                        <div class="media-left">
                            <img src="../img/index/apple.png" />
                        </div>
                        <div class="media-body">
                            <p>iPhone</p>
                            <p>客户端</p>
                        </div>
                    </li>
                    <li>
                        <div class="media-left">
                            <img src="../img/index/android.png" />
                        </div>
                        <div class="media-body">
                            <p>Android</p>
                            <p>客户端</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div id="copy">
                <p>北京找房无忧房地产经纪公司</p>
                <p>网络经营许可证京ICP备20160812号</p>
            </div>
        </div>
    </footer>

    <script>
        $(function() {
            setRem();
            $(function() {
                $(window).bind("resize", function() {
                    setRem();
                })
            });
        })
        $("#navList>ul>li").click(function() {
            active($(this))
        })
        $("#zhe").click(function() {
            body();
        })
    </script>
</body>

</html>